<template>
  <view class="container">
    <uni-card title="导航与帮助">
      <!-- 导航功能 -->
      <view class="navigation-section">
        <view class="section-title">校园导航</view>
        <button class="btn primary" @click="navigateToReportPoint">导航到报到点</button>
        <button class="btn primary" @click="navigateToDormitory">导航到宿舍</button>
        <button class="btn primary" @click="navigateToCanteen">导航到食堂</button>
        <button class="btn primary" @click="navigateToLibrary">导航到图书馆</button>
        <button class="btn primary" @click="navigateToClassroom">导航到教学楼</button>
        <button class="btn primary" @click="navigateToHospital">导航到校医院</button>
        <button class="btn primary" @click="navigateToBank">导航到银行</button>
        <button class="btn primary" @click="navigateToPostOffice">导航到邮局</button>
      </view>
      
      <!-- 地图功能 -->
      <view class="map-section">
        <view class="section-title">地图工具</view>
        <button class="btn" @click="openTencentMap">打开腾讯地图</button>
        <button class="btn" @click="openBaiduMap">打开百度地图</button>
        <button class="btn" @click="openGaodeMap">打开高德地图</button>
      </view>
      
      <!-- 帮助信息 -->
      <view class="help-section">
        <view class="section-title">常见问题</view>
        <uni-collapse>
          <uni-collapse-item title="如何完成身份核验？" open>
            <text>1. 点击首页"身份核验"模块\n2. 按照提示完成人脸识别\n3. 等待系统验证结果</text>
          </uni-collapse-item>
          <uni-collapse-item title="缴费方式有哪些？">
            <text>1. 微信支付\n2. 支付宝\n3. 银行卡转账\n4. 现金缴费</text>
          </uni-collapse-item>
          <uni-collapse-item title="宿舍分配规则是什么？">
            <text>1. 按专业分配\n2. 按报到时间分配\n3. 特殊情况可申请调整</text>
          </uni-collapse-item>
          <uni-collapse-item title="报到流程是什么？">
            <text>1. 身份核验\n2. 缴费\n3. 宿舍分配\n4. 信息采集\n5. 完成报到</text>
          </uni-collapse-item>
          <uni-collapse-item title="如何使用导航功能？">
            <text>1. 点击对应的导航按钮\n2. 系统会自动跳转到地图应用\n3. 在地图应用中确认导航路线\n4. 开始导航</text>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </uni-card>
  </view>
</template>

<script setup>
// 预设的校园地点坐标（请根据实际校园位置调整）
const campusPlaces = {
  reportPoint: {
    name: '新生报到点',
    latitude: 39.984,
    longitude: 116.407,
    address: '新生报到大厅'
  },
  dormitory: {
    name: '学生宿舍',
    latitude: 39.985,
    longitude: 116.408,
    address: '学生宿舍区'
  },
  canteen: {
    name: '学生食堂',
    latitude: 39.983,
    longitude: 116.406,
    address: '学生食堂'
  },
  library: {
    name: '图书馆',
    latitude: 39.986,
    longitude: 116.409,
    address: '图书馆'
  },
  classroom: {
    name: '教学楼',
    latitude: 39.982,
    longitude: 116.405,
    address: '教学楼'
  },
  hospital: {
    name: '校医院',
    latitude: 39.987,
    longitude: 116.410,
    address: '校医院'
  },
  bank: {
    name: '银行',
    latitude: 39.981,
    longitude: 116.404,
    address: '校园银行'
  },
  postOffice: {
    name: '邮局',
    latitude: 39.988,
    longitude: 116.411,
    address: '校园邮局'
  }
}

// 导航到报到点
function navigateToReportPoint() {
  navigateToPlace(campusPlaces.reportPoint)
}

// 导航到宿舍
function navigateToDormitory() {
  navigateToPlace(campusPlaces.dormitory)
}

// 导航到食堂
function navigateToCanteen() {
  navigateToPlace(campusPlaces.canteen)
}

// 导航到图书馆
function navigateToLibrary() {
  navigateToPlace(campusPlaces.library)
}

// 导航到教学楼
function navigateToClassroom() {
  navigateToPlace(campusPlaces.classroom)
}

// 导航到校医院
function navigateToHospital() {
  navigateToPlace(campusPlaces.hospital)
}

// 导航到银行
function navigateToBank() {
  navigateToPlace(campusPlaces.bank)
}

// 导航到邮局
function navigateToPostOffice() {
  navigateToPlace(campusPlaces.postOffice)
}

// 通用导航函数 - 使用多种地图应用
function navigateToPlace(place) {
  // 显示地图选择弹窗
  uni.showActionSheet({
    itemList: ['腾讯地图', '高德地图', '百度地图', '系统地图'],
    success: function (res) {
      switch (res.tapIndex) {
        case 0:
          openTencentMapApp(place)
          break
        case 1:
          openGaodeMapApp(place)
          break
        case 2:
          openBaiduMapApp(place)
          break
        case 3:
          openSystemMap(place)
          break
      }
    }
  })
}

// 打开腾讯地图APP
function openTencentMapApp(place) {
  const url = `qqmap://map/routeplan?type=drive&to=${encodeURIComponent(place.name)}&tocoord=${place.latitude},${place.longitude}`
  
  // 尝试打开腾讯地图APP
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开腾讯地图APP')
      uni.showToast({
        title: '正在打开腾讯地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开腾讯地图APP失败：', err)
      // 如果APP未安装，提示用户
      uni.showModal({
        title: '提示',
        content: '未检测到腾讯地图APP，是否使用系统地图？',
        success: function (res) {
          if (res.confirm) {
            openSystemMap(place)
          }
        }
      })
    }
  })
}

// 打开高德地图APP
function openGaodeMapApp(place) {
  const url = `iosamap://route?sourceApplication=新生报到系统&dname=${encodeURIComponent(place.name)}&dlat=${place.latitude}&dlon=${place.longitude}&dev=0&t=0`
  
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开高德地图APP')
      uni.showToast({
        title: '正在打开高德地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开高德地图APP失败：', err)
      uni.showModal({
        title: '提示',
        content: '未检测到高德地图APP，是否使用系统地图？',
        success: function (res) {
          if (res.confirm) {
            openSystemMap(place)
          }
        }
      })
    }
  })
}

// 打开百度地图APP
function openBaiduMapApp(place) {
  const url = `baidumap://map/direction?destination=name:${encodeURIComponent(place.name)}|latlng:${place.latitude},${place.longitude}&mode=driving&src=新生报到系统`
  
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开百度地图APP')
      uni.showToast({
        title: '正在打开百度地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开百度地图APP失败：', err)
      uni.showModal({
        title: '提示',
        content: '未检测到百度地图APP，是否使用系统地图？',
        success: function (res) {
          if (res.confirm) {
            openSystemMap(place)
          }
        }
      })
    }
  })
}

// 打开系统地图（作为备选方案）
function openSystemMap(place) {
  uni.openLocation({
    latitude: place.latitude,
    longitude: place.longitude,
    name: place.name,
    address: place.address,
    scale: 18,
    success: function () {
      console.log('成功打开系统地图')
      uni.showToast({
        title: '正在打开系统地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开系统地图失败：', err)
      // 提供手动操作提示
      uni.showModal({
        title: '导航提示',
        content: `请手动打开地图应用，搜索"${place.name}"进行导航`,
        showCancel: false,
        confirmText: '知道了'
      })
    }
  })
}

// 打开腾讯地图
function openTencentMap() {
  // 尝试打开腾讯地图APP
  const url = 'qqmap://map/'
  
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开腾讯地图')
      uni.showToast({
        title: '正在打开腾讯地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开腾讯地图失败：', err)
      uni.showModal({
        title: '打开腾讯地图',
        content: '请手动打开腾讯地图应用',
        showCancel: false,
        confirmText: '知道了'
      })
    }
  })
}

// 打开百度地图
function openBaiduMap() {
  const url = 'baidumap://map/'
  
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开百度地图')
      uni.showToast({
        title: '正在打开百度地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开百度地图失败：', err)
      uni.showModal({
        title: '打开百度地图',
        content: '请手动打开百度地图应用',
        showCancel: false,
        confirmText: '知道了'
      })
    }
  })
}

// 打开高德地图
function openGaodeMap() {
  const url = 'iosamap://map/'
  
  uni.openUrl({
    url: url,
    success: function () {
      console.log('成功打开高德地图')
      uni.showToast({
        title: '正在打开高德地图',
        icon: 'success'
      })
    },
    fail: function (err) {
      console.error('打开高德地图失败：', err)
      uni.showModal({
        title: '打开高德地图',
        content: '请手动打开高德地图应用',
        showCancel: false,
        confirmText: '知道了'
      })
    }
  })
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  margin-top: 30rpx;
}

.navigation-section,
.map-section,
.help-section {
  margin-bottom: 40rpx;
}

.btn {
  margin: 10rpx 0;
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.btn.primary {
  background: #2979ff;
  color: white;
}

.btn:active {
  opacity: 0.8;
}
</style> 